<!--角色管理-->
<template>
	<el-card>
		<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
			<el-form-item class="form-button-right">
				<el-button v-auth="'module:role:save'" type="primary" @click="openStaffIndex()">添加员工</el-button>
				<el-button v-auth="'module:role:delete'" type="danger" @click="deleteBatchHandle()">批量移除</el-button>
			</el-form-item>

			<el-form-item>
				<KeyQuery v-model="state.queryForm.keyword" @getDataList="getDataList()" />
			</el-form-item>
		</el-form>

		<el-row>
			<el-col :span="4">
				<el-table v-if="refreshTable" :default-expand-all="true" v-loading="state.dataListLoading"
					:data="dataListLeft.dataList" row-key="id" class="left-tree" :cell-style="{ borderColor: '#00000000' }"
					:header-cell-style="{ borderColor: '#00000000' }" @row-click="fnRoleId">
					<el-table-column prop="name" label="角色列表" header-align="center" align="center"></el-table-column>

					<el-table-column label="操作" fixed="right" header-align="right" align="right" width="150"
						:render-header="addLeftView">
						<template #default="scope">
							<div class="operation_show">
								<el-button v-auth="'module:role:update'" type="primary" link
									@click="addOrUpdateHandle(scope.row.id)">修改</el-button>
								<el-button v-auth="'module:role:delete'" type="primary" link
									@click="deleteBatchHandle(scope.row.id)">删除</el-button>
							</div>
						</template>
					</el-table-column>
				</el-table>
			</el-col>
			<el-col :span="20">
				<el-table v-loading="state.dataListLoading" :data="state.dataList" border style="width: 100%"
					@selection-change="selectionChangeHandle">
					<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
					<el-table-column prop="id" label="主键" header-align="center" align="center"
						v-if="false"></el-table-column>

					<el-table-column prop="name" label="员工姓名" header-align="center" align="center"></el-table-column>
					<el-table-column prop="code" label="员工编号" header-align="center" align="center"></el-table-column>
					<el-table-column prop="phone" label="手机号" header-align="center" align="center"></el-table-column>
					<el-table-column prop="organName" label="部门" header-align="center" align="center"></el-table-column>
					<el-table-column prop="positionName" label="职位" header-align="center" align="center"></el-table-column>

					<el-table-column label="操作" fixed="right" header-align="center" align="center" width="250">
						<template #default="scope">
							<el-button v-auth="'module:workplace:update'" type="primary" link
								@click="deleteBatchHandle(scope.row.id)">移除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-pagination :current-page="state.page" :page-sizes="state.pageSizes" :page-size="state.limit"
					:total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle"
					@current-change="currentChangeHandle">
				</el-pagination>
			</el-col>
		</el-row>

		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="findListLeft" width="500px"></add-or-update>

		<!-- 弹窗, 添加员工 -->
		<staff-index ref="openStaffRef" @refreshDataList="getDataList" :roleId="roleId"></staff-index>
	</el-card>
</template>

<style lang="scss" scoped>
.left-tree> ::before {
	height: 0px;
}

.operation_show {
	display: none;
}

.el-table__body tr:hover>td .operation_show {
	display: block;
}
</style>

<script setup lang="ts" name="ModuleRoleIndex">
import { useCrud } from '@/hooks'
import { reactive, ref, h } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import service from '@/utils/request'

import StaffIndex from '@/views/nb/staff/select.vue'

import AddOrUpdate from './plane/role-a-u.vue'

const state: IHooksOptions = reactive({
	dataListUrl: '/nb/role_staff/page',
	deleteUrl: '/nb/role/delete',
	queryForm: {
		roleId: ''
	}
})

// 是否重新渲染表格状态
const refreshTable = ref(true)
const butShow = ref(false)
const roleId = ref()
const dataListLeft = {
	dataList: []
}

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	addOrUpdateRef.value.init(id)
}

const openStaffRef = ref()
const openStaffIndex = (id?: number) => {
	butShow.value = true
	openStaffRef.value.init(id)
}

//角色添加按键
const addLeftView = () => {
	return h(
		'div',
		{},
		h(
			'svg',
			{ width: '15px', height: '15px' },
			h('use', {
				href: '#icon-setting',
				onClick: () => {
					addOrUpdateHandle()
				}
			})
		)
	)
}

// 刷新 左侧列表
const findListLeft = () => {
	service
		.get('/nb/role/list', {
			params: {}
		})
		.then((res: any) => {
			dataListLeft.dataList = res.data
			if (res.data.length > 0) {
				roleId.value = res.data[0].id
				pushDataList(roleId.value)
			}
		})
		.finally(() => { })
}
findListLeft()

//刷新 右侧列表
const pushDataList = (typeId?: string) => {
	state.queryForm.roleId = typeId
	getDataList()
}

//处理 roleId 属性
const fnRoleId = (row: { id: string | undefined }) => {
	roleId.value = row.id
	pushDataList(row.id)
}
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>
